
<template>
  <div class="box">
    <p class="box1">登录</p>
    <p>
      用户名:
      <input type="text" v-model="username" />
    </p>
    <p>
      密  码:
      <input type="password" v-model="userpass" />
    </p>
    <p>
      <input type="button" value="登录" @click="loginCheck"  class="button01"/>
    </p>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { ref } from "vue";
import { useRouter } from "vue-router"
import service from "../utils/service";

const username = ref("");
const userpass = ref("");

// 使用userRouter() 得到路由对象。
const router = useRouter();

const loginCheck = () => {
  service({
    url: "/admin/login",
    method: "post",
    data: {
      adminname: username.value,
      password: userpass.value,
    }
  })
    .then(res => {
      if (res.data.code === "200") {
        ElMessage({
                message:"成功登录！亲",
                type:"success"
            })
        // 保存用户名
        sessionStorage.setItem("username", username.value);
        //保存密码
        sessionStorage.setItem("password", userpass.value);
        // 保存token
        sessionStorage.setItem("token", res.data.data.token);

        // 跳转到首页
        router.push("/Admin");
      }
    })
}

</script>
<style scoped>
.box{
  width: 400px;
  height: 240px;
  margin: 100px auto;
  background-color: pink;
  text-align: center;
  overflow: hidden;
}
.box>.box1{
  margin-top: 20px;
  font-size: 25px;
  font-weight: 600;
}
.box input{
  margin-top: 20px;
  border: 0;
  height: 25px;
  outline: none;
  border-radius: 5px;
  margin-bottom: 10px;
}
.button01{
  border: 0;
  width: 60px;
  height: 30px;
  border-radius: 5px;
  background-color: green;
  line-height: 20px;
  color: white;
  font-size: 16px;
}
</style>
